<template>
  <div>
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-nav :iconList="iconList"></home-nav>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-weekend :weekendList="weekendList" />
  </div>
</template>

<script>
import HomeHeader from "./chirdran/Header";
import HomeSwiper from "./chirdran/Swiper";
import HomeNav from "./chirdran/nav";
import HomeRecommend from "./chirdran/Recommend";
import HomeWeekend from "./chirdran/Weekend";
import { getdata } from "api/index";
import { mapState } from "vuex";

export default {
  name: "Home",
  components: {
    lastCity: "", //保存旧城市 新旧不一样才重新发送请求 不然直接取缓存的数据
    HomeHeader,
    HomeSwiper,
    HomeNav,
    HomeRecommend,
    HomeWeekend
  },
  computed: {
    ...mapState(["city"])
  },
  data() {
    return {
      //父组件传递数据给子组件
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    };
  },
  mounted() {
    this.getCity(), (this.lastCity = this.city);
  },
  methods: {
    getCity() {
      getdata().then(res => {
        const data = res.data;
        this.swiperList = data.swiperList;
        this.iconList = data.iconList;
        this.recommendList = data.recommendList;
        this.weekendList = data.weekendList;
      });
    }
  },
  //加上keep-alvie 组件缓存才有的生命钩子 组件缓存才有效果 组件开始的时候才执行
  activated() {
    // 进入组件之前会执行 ， 就是页面重置被显示的时候  判断当前和上次城市是否一致 再去发送请求
    if (this.city !== this.lastCity) {
      this.lastCity = this.city;
      this.getCity() //重新获取数据 别的城市的数据进行展示
    }
  }
};
</script>
<style lang="stylus" scoped></style>